/* 重置样式 */
page {
  box-sizing: border-box;
  min-height: 100vh;
  font-size: 28rpx;
  color: #333;
  background-color: #f5f5f5;
}

/* NutUI 主题变量覆盖 */
page,
.nutui-taro {
  --nut-primary-color: #4C7BFD !important;
  --nut-radio-label-font-active-color: #4C7BFD !important;
  --nut-button-primary-background-color: #4C7BFD !important;
  --nut-button-primary-border-color: #4C7BFD !important;
  --nut-cell-group-title-color: #4C7BFD !important;
  --nut-cell-group-desc-color: #4C7BFD !important;
  --nut-cell-title-color: #4C7BFD !important;
  --nut-cell-desc-color: #4C7BFD !important;
  --nut-cell-value-color: #4C7BFD !important;
  --nut-cell-link-color: #4C7BFD !important;
  --nut-cell-active-color: #4C7BFD !important;
  --nut-cell-active-background-color: #4C7BFD !important;
  --nut-cell-active-border-color: #4C7BFD !important;
  --nut-cell-active-text-color: #4C7BFD !important;
  --nut-cell-active-icon-color: #4C7BFD !important;
  --nut-cell-active-arrow-color: #4C7BFD !important;
  --nut-cell-active-arrow-background-color: #4C7BFD !important;
  --nut-cell-active-arrow-border-color: #4C7BFD !important;
  --nut-cell-active-arrow-text-color: #4C7BFD !important;
  --nut-cell-active-arrow-icon-color: #4C7BFD !important;
}

/* 盒模型统一 */
view, text, scroll-view, swiper, button, form, input, textarea, label, navigator {
  box-sizing: border-box;
}
// .nut-cell {
//   padding: 0 !important;
// }
.nut-cell-group__wrap {
  box-shadow: none !important;
}

/* 去除按钮默认样式 */
button {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  line-height: normal;

  &::after {
    border: none;
  }
}

/* 去除导航默认样式 */
navigator {
  padding: 0;
  border: none;
  line-height: normal;
}

/* 去除滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

/* 文本溢出省略号 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* flex布局工具类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* 安全区域适配 */
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 常用间距 */
.margin-8 {
  margin: 8rpx;
}

.padding-8 {
  padding: 8rpx;
}

.margin-16 {
  margin: 16rpx;
}

.padding-16 {
  padding: 16rpx;
}

/* 1px 边框解决方案 */
.border-1px {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #eee;
    transform: scaleY(0.5);
    transform-origin: 0 100%;
  }
}

/* 点击态效果 */
.hover-class {
  opacity: 0.7;
}

/* 禁用态效果 */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 图片默认样式 */
image {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 清除浮动 */
.clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* 常用字体大小 */
.font-small {
  font-size: 24rpx;
}

.font-normal {
  font-size: 28rpx;
}

.font-large {
  font-size: 32rpx;
}

/* 常用颜色变量 */
// :root {
//   --primary-color: #3275fa;
//   --success-color: #07c160;
//   --warning-color: #ff976a;
//   --error-color: #ee0a24;
//   --text-color: #333333;
//   --text-color-gray: #999999;
//   --border-color: #eeeeee;
//   --bg-color: #f5f5f5;
// }
